import React from "react";
import { Image } from "antd-mobile";
import { useNavigate } from "react-router-dom";

import "./BookCard.scss";

export default function BookCard({ book, width }) {
  let navigate = useNavigate();
  return (
    <li
      className="book-card"
      onClick={() => navigate("/book?id=" + book.id + "&title=" + book.title)}
    >
      <Image
        src={book.cover + "?imageView&thumbnail=240y336"}
        width={width + "vw"}
        height={width * 1.4 + "vw"}
        style={{ borderRadius: 4 }} 
        fit="fill"
        lazy={true}
      />
      <p className="title" style={{width:width + "vw"}}>{book.title}</p>
      <p className="name" style={{width:width + "vw"}}>{book.author}</p>
    </li>
  );
}
